<template>
	<view class="container">
		<view class="example">
			<!-- 基础用法，不包含校验规则 -->
			<uni-forms ref="baseForm" :model="baseFormData" labelWidth="90px">
				<uni-forms-item label="报警器类型" required>
					<uni-data-checkbox v-model="baseFormData.type" :localdata="types" mode="list"/>
				</uni-forms-item>
				<uni-forms-item label="名称" required>
					<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="年龄" required>
					<uni-easyinput v-model="baseFormData.age" placeholder="请输入年龄" />
				</uni-forms-item>
				<uni-forms-item label="性别" required>
					<uni-data-checkbox v-model="baseFormData.sex" :localdata="sexs" />
				</uni-forms-item>

				<uni-forms-item label="地址">
					<uni-easyinput v-model="baseFormData.address" placeholder="请输入地址" />
				</uni-forms-item>
				<uni-forms-item label="自定义信息">
					<uni-easyinput v-model="baseFormData.bed" placeholder="请输入自定义信息" />
				</uni-forms-item>
<!-- 				<uni-forms-item label="床位" required>
					<uni-easyinput v-model="baseFormData.bed" placeholder="请输入床位" />
				</uni-forms-item> -->

				<!-- <uni-forms-item label="床位" required>
					<picker class="form-item" mode="multiSelector" @columnchange="bindMultiPickerColumnChange"
						:value="bed" :range="multiArray">
						<view class="uni-input">
							{{multiArray[0][bed[0]]}}，{{multiArray[1][bed[1]]}}，{{multiArray[2][bed[2]]}}，
							{{multiArray[3][bed[3]]}}
						</view>
					</picker>
				</uni-forms-item> -->

				<!-- <uni-forms-item label="日期时间">
					<uni-datetime-picker type="datetime" return-type="timestamp"
						v-model="baseFormData.info_submit_date" />
				</uni-forms-item> -->

				<uni-forms-item label="其他备注">
					<uni-easyinput type="textarea" v-model="baseFormData.introduction" placeholder="请输入其他备注" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit('baseForm')">提交</button>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 基础表单数据
				baseFormData: {
					type: '',
					name: '',
					age: '',
					introduction: '',
					sex: '',
					address: '',
					bed: '',
					// info_submit_date: Date.now(),
					info_submit_date: Date.now(),
					phone: uni.getStorageSync('userPhoneNumber'),
				},
				deviceUUID: '',

				// 单选数据源
				sexs: [{
					text: '男',
					value: '男'
				}, {
					text: '女',
					value: '女'
				}],
				types: [{
					text: '看护报警器',
					value: 0
				}, {
					text: '看护氧舱报警器',
					value: 1
				}],

				/* multiArray: [
					['-区', 'A区', 'B区', 'C区'],
					['-楼', '1楼', '2楼', '3楼', '4楼', '5楼', '6楼', '7楼'],
					['-房', '1房', '2房', '3房', '4房', '5房', '6房', '7房'],
					['-床', '1床', '2床', '3床', '4床']
				],
				bed: [0, 0, 0, 0], */

			}
		},

		computed: {},
		onLoad(options) {
			// console.log(options);
			if (options.uuid) {
				console.log('Received deviceUUID:', options.uuid);
				this.deviceUUID = options.uuid;
			} else {
				console.log('UUID parameter is mising');
			};
			// 尝试从本地存储获取表单数据
			const savedFormData = uni.getStorageSync('formData');
			if (savedFormData) {
				this.baseFormData = savedFormData;
			};
			const savedMultiIndex = uni.getStorageSync('bed');
			if (savedMultiIndex) {
				this.bed = savedMultiIndex;
			}
		},
		onReady() {},
		methods: {
			bindMultiPickerColumnChange: function(e) {
				// console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value);
				this.bed[e.detail.column] = e.detail.value;
				this.$forceUpdate();
			},

			submit(ref) {
				this.$refs[ref].validate().then(res => {
					// 准备要发送的数据，包括baseFormData, deviceUUID和bed
					this.baseFormData.deviceUUID = this.deviceUUID;
					this.baseFormData.bed = this.bed;

					console.log(this.baseFormData);

					uni.request({
						url: this.$baseUrl + '/user/device/submit', // 后端接口URL
						method: 'POST',
						data: this.baseFormData, // 直接发送对象，uni.request会将其转换为JSON字符串
						header: {
							'content-type': 'application/x-www-form-urlencoded', // 设置请求头
							'token': uni.getStorageSync('token')
						},
						success: (res) => {
							if (res.statusCode === 200) {
								// 请求成功处理
								console.log('提交成功', res);
								// console.log(this.dataToSend);
								uni.showToast({
									title: '提交成功',
									duration: 2000
								});
								// 成功后跳转到首页
								uni.navigateBack({
									url: '/pages/index/index',
								});
							} else {
								// 服务器返回非200状态码处理
								console.error('数据提交失败：', res);
								uni.showToast({
									title: '提交失败: ' + res.errMsg,
									icon: 'none',
									duration: 2000
								});
							}
						},
						fail: (err) => {
							// 网络或其他错误处理
							console.error('请求错误：', err);
							uni.showToast({
								title: '请求错误',
								icon: 'none',
								duration: 2000
							});
						}
					});
				}).catch(err => {
					// 验证失败处理
					console.log('err', err);
				});
			},
		}
	}
</script>

<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
		height: auto;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
		height: 80rpx;
		flex: 1;
		border: #e5e5e5 2rpx solid;
		border-radius: 5px;
	}

	.uni-input {
		margin-left: 10rpx;
		padding: 10rpx;
		font-size: 25rpx;
		// color: #999999;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		line-height: 35px;
		margin-left: 10px;
	}
</style>